// 注意点：数据状态的管理一定是在类组件中进行，函数组件管理不了
import React from "react";

export default class StateMgr extends React.Component {
  // 将计数器的变量定义在state这个对象中,(注意：state是一个固定的成员变量，不能更改)
  //   1.0 数据的定义：放在state对象中
  state = {
    count: 0,
    name: "ivan",
  };

  handerClick = () => {
    //   每次执行都将state中的count数量加1，必须使用setState()
    //   语法格式：this.setState({要修改的属性名称：最新的属性值})
    //   2.0 数据的改变，一定是使用setState()方法
    this.setState({
      count: ++this.state.count,
      name: "rose",
    });
    //   错误演示
    // this.state.count = this.state.count + 1;
  };
  render() {
    return (
      <div>
        <h4 style={{ display: "inline" }}>计数器: </h4>
        <span>{this.state.count}</span> <br />
        <br />
        {this.state.name}
        <br />
        <button onClick={this.handerClick}>+1</button>
      </div>
    );
  }
}
